<template>
  <div>
    <h2>轮播图tab切换</h2>
    <div class="banner">
      <div class="top">
        <img :src="require('../' + img[cur])" referrerPolicy="no-referrer" />
        <span class="left" @click="left"> </span>
        <span class="right" @click="right"> > </span>
      </div>
      <div class="bottom">
        <li
          v-for="(item, i) in img"
          :key="i"
          @click="chose(i)"
          :class="{ active: cur == i }"
        >
          <img :src="require('../' + item)" referrerPolicy="no-referrer" />
        </li>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"],
      cur: 0,
    };
  },
  methods: {
    chose(i) {
      this.cur = i;
    },
    left() {
      this.cur--;
      if (this.cur < 0) {
        this.cur = 3;
      }
    },
    right() {
      this.cur++;
      if (this.cur == 4) {
        this.cur = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 600px;
  height: 300px;
  .top {
    position: relative;
    img {
      width: 600px;
      height: 250px;
    }
    span {
      font-size: 35px;
      color: blue;
    }
    .left {
      position: absolute;
      left: 10px;
      top: 150px;
    }
    .right {
      position: absolute;
      right: 10px;
      top: 150px;
    }
  }
  .bottom {
    display: flex;
    li {
      list-style: none;
      padding: 0;
      width: 150px;
      height: 80px;
      background: #000;
      opacity: 0.4;
      z-index: 999;
      img {
        width: 150px;
        height: 80px;
      }
    }
    .active {
      background: #000;
      opacity: 1;
      z-index: 0;
    }
  }
}
</style>